<template>
	<view class="view">
		<view class="student-xx">
			
			<view class="rect" >
			  <!-- 头像 -->
			  <view class="avatar-box"><image style="width: 100%;" :src="student.studentAvatar" class="avatar"></image></view>
			
			  <!-- 其他信息 -->
				 <view class="content">
					  
					  <view class="content1">
						<view class="stuName">{{student.studentName}}</view>
						<!-- <p v-text="studentName"></p> -->
						<image :src="getImagePath(student.studentSex)" mode="aspectFit" class="stuSex"></image>
						<view class="className"> {{student.className}}</view>
						<view class="edit" v-if="index==1" @click="toEditChild"><p>编辑</p></view>
						
						
					  </view> 
						
					  <view class="content2">
						<text class="stuBirth">{{student.studentBirthday}}</text>  
						<text class="kgName">{{student.kgName}}</text>  
					  </view> 
					  
				  </view> 
				 
			   
			</view>
		</view>
		<!-- 购买过的照片 -->
		<view class="pictureList" v-for="(item,index) in pictureList" :class="pictureIdList.includes(item.id)? 'img1':'img2'">
			
			<view>
				<image style="width: 100%;" :src="item.pictureUrl"  class="img" @click="showViewer(item)"></image>
			</view>
			<view class="suo-ys">
				<view class="suo style2">
					<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
			</view>
			
		</view>
		<!-- 未购买的照片 -->
		<view class="pictureList1" v-for="(item,index) in pictureList" :class="pictureIdList.includes(item.id)? 'img2':'img1'">
			
			<view>
				<image style="width: 100%;" :src="item.pictureUrl"  class="img" @click="showViewer(item)"></image>
			</view>
			<view class="suo-ys">
				<view class="suo" v-if="unlockIndex==0" :class="pictureIdList.includes(item.id)? 'style2':'style1'">
					<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
				
				<view class="suo" v-if="unlockIndex==1" :class=" 'style2'">
					<image  src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
			</view>
			
		</view>
		<view class="footer">
			<button  class="btn-glbb" v-if="index==0" @click="toEditChild">关联宝贝</button>
			<button class="btn-glb" v-if="index==1" @click="delguanlian"><p>已关联</p></button>
		</view>
	</view>
</template>

<script>

	
	export default {
		data() {
			return {
				//已购买的底片
				pictureIdList:[],
				student:null,
				//所有照片
				pictureList:[],
				studentId:null,
				parentId:null,
				//未关联
				index:0,
				//是否解锁所有底片
				unlockIndex:0,
				curData:{
					studentId:null,
					parentId:null
				}
			}
		},
		onLoad(e) {
		
			this.parentId = uni.getStorageSync("parentId")
			this.studentId = e.id
			this.curData.studentId = parseInt(e.id)
			this.curData.parentId = uni.getStorageSync("parentId")
			
			uni.$on('getStudentInfo',() => {
					this.getPictureList(e.id)
					this.getStudentInfo()
					this.getCheckPictureList(this.studentId,this.parentId)
				})
			this.getPictureList()
			this.getStudentInfo()
			this.getCheckPictureList(this.studentId,this.parentId)
			this.isUnlockAllPic()
		},

		methods: {
			
			//点击预览图片
			showViewer(current){
				let picurl = []
				picurl.push(current.pictureUrl)
				let picId = current.id
				if( (this.pictureIdList.includes(picId) && this.unlockIndex==0) ||this.unlockIndex==1){
					uni.previewImage({
						urls:picurl,
					})
				}else{
					uni.showModal({
						content:"订购本学期成长记忆服务，下载全部高清底片，现在就去订购吧。",
						success:function(res){
							if(res.confirm){

								uni.switchTab({
									url: '/pages/baby/baby'
								})
							}
							else if(res.cancel){
								
							}
						}
					})
				}

			},
			//获取学生个人信息
			getStudentInfo(){
				uni.$api.appFindStudentById(this.studentId).then(res =>{
					this.student = res	
				})
				uni.$api.parentStuFind(this.curData).then(res=>{
					this.index = res
				})

			},
			//取消关联
			delguanlian(){
			
				uni.$api.parentStudentDel(this.curData).then(res=>{
					this.index = 0	
					uni.$emit("getStudentInfo")
				})	
			},
			
			//是否解锁所有底片
			isUnlockAllPic(){
				uni.$api.isUnlockAllPic(this.studentId,this.parentId).then(result =>{	
					if(result > 0){
						//解锁所有
						this.unlockIndex = 1
					}else{
						//未解锁所有
						this.unlockIndex = 0
					}
					
				})
			},
			//获取已选照片列表
			getCheckPictureList(studentId,parentId){
				uni.$api.appBillPicFindList(studentId,parentId).then(result =>{
					this.pictureIdList = result
				})
			},
			
			//获取所有照片列表
			getPictureList(){
				uni.$api.appPictureFindByStudentId(this.studentId).then(result =>{
					this.pictureList = result
				})
			},
			//性别图标
			getImagePath(gender) {
			  if (gender === '1') {  
				return '/static/me/nan.png';
			  } else if (gender === '2') {  
				return '/static/me/nv.png';
			  } else {  
				return ' '; // 如果性别不是1或2，返回空路径或其他默认图片路径  
			  }  
			},  
			
			//跳转编辑学生信息页面
			toEditChild(){
				uni.navigateTo({
					url:"/subpkg/parent/editChild/editChild?id="+this.studentId
				})
				
			}
		}
	}
</script>

<style>
*{
	margin: 0rpx;
	padding: 0rpx;
}
.suo-ys{
	width: 45rpx;
	height: 65rpx;
}
.suo{
	width: 45rpx;
	height: 45rpx;
	position:relative;
	top:-200rpx;
	left: 25rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	padding-left: 8rpx;

}
.style1{
	display: block;
}
.style2{
	display: none;
}
.student-xx{
	overflow: hidden;
	width: 2000rpx;
	height: 970rpx;
	background-color: #FDC722;
	border-radius: 50%;
	position:relative;
	top:-630rpx;
	left: -620rpx;
}
.rect{
	width: 650rpx;
	height: 200rpx;
	position:relative;
	top:720rpx;
	left: 670rpx;

}
.avatar-box{
	height: 100%;
	width: 25%;
	margin-top: 10rpx;
}
.avatar {  
	height: 80%;
	display: flex;
	border-radius: 50%;
	align-items: center;

}
.content{
	display: inline-block;
	width: 70%;
	height: 80%;
	position:relative;
	top:-220rpx;
	left: 26%;
	padding-left: 10rpx;
	padding-top: 50rpx;
}
.stuName{
	display: inline-block;
	/* width: 120rpx; */
	font-size: 1.3rem;
	font-weight: bold;
}
.stuSex{
	width: 30rpx;
	height: 30rpx;
	margin: 0 10rpx 0 10rpx;
	border-radius: 50%;
}
.className{
	display: inline-block;
	font-size: 0.8rem;
	padding: 5rpx 20rpx;
	/* width: 150rpx; */
	background-color: #FDF4D0;
	margin-left: 10rpx;
	margin-bottom: 10rpx;
	font-weight: bold;
	text-align: center;
	border-radius: 50rpx;
}
.stuBirth{
	font-size: 1rem;;
}
.kgName{
	font-size: 1rem;
	margin-left: 40rpx;
	margin-top: 20rpx;
}
.pictureList{
	width: 45%;
	display: inline-block;
	position: relative;
	top: -550rpx;
	margin-left: 25rpx;
	margin-top: -40rpx;
}
.pictureList1{
	width: 45%;
	display: inline-block;
	position: relative;
	top: -550rpx;
	margin-left: 25rpx;
	margin-top: -30rpx;
}
.img1{
	display: inline-block;
	
}
.img2{
	display: none;
}
.img{
	/* widthFixs: 100%; */
	height: 210rpx;
	border-radius: 20rpx;
}
.footer{
	width: 100%;
	height: 10%;
	position: fixed;
	bottom: 0rpx;
	background-color: white;
	padding-top: 30rpx;
}
.btn-glbb{
	width: 30%;
	height: 60%;
	background-color: #FDC722;
	color: white;
	border-radius: 50rpx;
	
}
.btn-glb{
	width: 30%;
	height: 60%;
	color: white;
	background-color: gray;
	border-radius: 50rpx;
	
}
.btn-glbb p{
	line-height: 60rpx;
	color: white;
	padding-bottom: 20rpx;
}

.img-suo{
	width: 30rpx;
	height: 30rpx;
}
.edit{
	width: 30%;
	position: relative;
	right: -170rpx;
	top:20rpx;
	display: inline-block;
}
.edit p{
	font-size: 1rem;
}
</style>
